<template>
    <div>
        <el-card class="box-card">
            <h3>地图文件</h3>
             <el-upload
                ref = "upload"
                class="upload-demo"
                action="/path/event/updateMap"
                :data = "eventObj"
                accept = ".jpg, .jpeg, .png"
                :auto-upload = "true" 
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-change="handleUploadChange"
                :on-progress="handleProgress"
                :on-success="handleSuccess"
                :on-exceed="handleExceed"
                multiple
                :limit="1"
                :file-list="uploadFileList">
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
                <div style="margin-top: 25px;" slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件 只能上传1张图片</div>
            </el-upload>
        </el-card>
        
        <el-card class="box-card">
            <el-row :gutter="50">
                <el-col :span="3">
                    <h3>地址列表</h3>
                </el-col>
                <el-col :span="24">
                    <el-button type="primary" size="mini" @click="addAddressDialogVisible = true">添加地址</el-button>
                </el-col>
            </el-row>
            <el-table :data="addressList"  stripe >
                <el-table-column type="index"></el-table-column>
                <el-table-column label="地点" prop="address"></el-table-column>
                <el-table-column label="操作">
                     <!-- 作用域插槽  在其中放置一些button-->
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" size="mini" plain @click="showEditDialog(scope.row.id)">修改</el-button> -->
                        <el-button type="danger" size="mini" plain @click="removeAddressById(scope.row.id)">删除</el-button>
                    </template> 
                </el-table-column>
            </el-table>
        </el-card>

        <el-card class="box-card">
            <el-row :gutter="50">
                <el-col :span="3">
                    <h3>人物列表</h3>
                </el-col>
                <el-col :span="24">
                    <el-button type="primary" size="mini" @click="addPeopleDialogVisible = true">添加人物</el-button>
                </el-col>
            </el-row>
            <el-table :data="peopleList"  stripe >
                <el-table-column type="index"></el-table-column>
                <el-table-column label="人物" prop="name"></el-table-column>
                <el-table-column label="操作">
                     <!-- 作用域插槽  在其中放置一些button-->
                    <template slot-scope="scope">
                        <!-- <el-button type="primary" size="mini" plain @click="showEditDialog(scope.row.id)">修改</el-button> -->
                        <el-button type="danger" size="mini" plain @click="removePeopleById(scope.row.id)">删除</el-button>
                    </template> 
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 知识元列表 -->
        <el-card class="box-card">
            <el-row :gutter="50">
                <el-col :span="3">
                    <h3>知识元列表</h3>
                </el-col>
                <el-col :span="24">
                    <el-button type="primary" size="mini" @click="addKEDialogVisible = true">添加知识元</el-button>
                </el-col>
            </el-row>
            <el-table :data="keList"  stripe >
                <el-table-column type="index"></el-table-column>
                <el-table-column label="知识元" prop="content"></el-table-column>
                <el-table-column label="操作">
                     <!-- 作用域插槽  在其中放置一些button-->
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" plain @click="showKeDetial(scope.row.id)">详情</el-button>
                        <el-button type="warning" size="mini" plain @click="showKeEditDialog(scope.row.id)">修改</el-button>
                        <el-button type="danger" size="mini" plain @click="removeKEById(scope.row.id)">删除</el-button>
                    </template> 
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 添加地址对话框 -->
        <el-dialog
            title="新增地址"
            :visible.sync="addAddressDialogVisible"
            width="50%"
            @close="addAddressDialogClosed">
            <!-- 对话框内容主体 -->
            <el-form :model="addAddressForm" :rules="addAddressFormRules" ref="addAddressFormRef" label-width="70px">
                <el-form-item label="地点" prop="address">
                    <el-input v-model="addAddressForm.address"></el-input>
                </el-form-item>
            </el-form>
            <!-- 对话框底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addAddressDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addAddress">确 定</el-button>
            </span>
        </el-dialog> 
        <!-- 添加人物对话框 -->
        <el-dialog
            title="新增人物"
            :visible.sync="addPeopleDialogVisible"
            width="50%"
            @close="addPeopleDialogClosed">
            <!-- 对话框内容主体 -->
            <el-form :model="addPeopleForm" :rules="addPeopleFormRules" ref="addPeopleFormRef" label-width="70px">
                <el-form-item label="人物" prop="name">
                    <el-input v-model="addPeopleForm.name"></el-input>
                </el-form-item>
            </el-form>
            <!-- 对话框底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addPeopleDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addPeople">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加知识元对话框 -->
        <el-dialog
            title="新增知识元"
            :visible.sync="addKEDialogVisible"
            width="50%"
            @close="addKEDialogClosed">
            <!-- 对话框内容主体 -->
            <el-form :model="keForm" :rules="keFormRules" ref="keFormRef" label-width="70px">
                <el-form-item label="知识元" prop="content">
                    <el-input v-model="keForm.content"></el-input>
                </el-form-item>
            </el-form>
            <!-- 对话框底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addKEDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addKE">确 定</el-button>
            </span>
        </el-dialog> 
        <!-- 修改知识元对话框 -->
        <el-dialog
            title="修改知识元"
            :visible.sync="editKEDialogVisible"
            width="50%"
            @close="editKEDialogClosed">
            <!-- 对话框内容主体 -->
            <el-form :model="editKEForm" :rules="editKEFormRules" ref="editKEFormRef" label-width="70px">
                <el-form-item label="知识元" prop="content"> <!--prop 是在editFormRule中用的-->
                    <el-input v-model="editKEForm.content"></el-input>
                </el-form-item>
            </el-form>
            <!-- 对话框底部 -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="editKEDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editKEInfo">确 定</el-button>
            </span>
        </el-dialog> 

    </div>
</template>

<script>
export default {
    data() {
        return {
            eventObj:{},
            eventId: '',
            addressList:[],
            peopleList:[],
            keList:[],
            uploadFileList:[],
            addAddressForm:{
                id:"",
                address:""
            },
            addPeopleForm:{
                id:"",
                name:""
            },
            keForm:{
                id:"",
                content:""
            },
            editKEForm: {
                id:"",
                content:""
            },
            addAddressDialogVisible:false,
            addPeopleDialogVisible:false,
            addKEDialogVisible:false,
            editKEDialogVisible:false,
            // 添加表单的验证规则对象
            addAddressFormRules:{
                address:[
                    { required: true, message: '请输入地址', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1~20个字符', trigger: 'blur' }
                ]
            },
            addPeopleFormRules:{
                name:[
                    { required: true, message: '请输入人物姓名', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1~20个字符', trigger: 'blur' }
                ]
            },
            keFormRules:{
                content:[
                    { required: true, message: '请输入知识元', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在1~50个字符', trigger: 'blur' }
                ]
            },
            editKEFormRules:{
                content:[
                    { required: true, message: '请输入知识元', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在1~50个字符', trigger: 'blur' }
                ]
            }
        }
    },
    watch: {
        '$route':"gettingData"
    },
    created() {
        this.gettingData();
    },
    methods: {
        // 对象排序
        arraySort(property) {
            return function(a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return value1-value2;
            }
        },
        // 页面获得数据
        gettingData() {
            // 接收上个页面过来的参数
            this.eventId = this.$route.query.eventId;
            this.eventObj = {id:this.eventId};

            // 发起get
            this.$http.get("event/selectOne", {params: {"id":this.eventId}}).then(
                res => {
                    var addressObjList = []
                    const eventObj = res.data.data;
                    const guanXi_eaList = eventObj.guanXi_eaList
                    for (let i = 0; i < guanXi_eaList.length; i++) {
                        const guanXi_ea = guanXi_eaList[i];
                        const address_obj = guanXi_ea["address"]
                        addressObjList.push(address_obj)
                    }
                    this.addressList = addressObjList;

                    var peopleObjList = []
                    const guanXi_epList = eventObj.guanXi_epList
                    for (let i = 0; i < guanXi_epList.length; i++) {
                        const guanXi_ep = guanXi_epList[i];
                        const people_obj = guanXi_ep["people"]
                        peopleObjList.push(people_obj)
                    }
                    this.peopleList = peopleObjList;


                    var keObjList = []
                    const guanXi_ekList = eventObj.guanXi_ekList;
                    for (let i = 0; i < guanXi_ekList.length; i++) {
                        const guanXi_ek = guanXi_ekList[i];
                        const ke_obj = guanXi_ek["knowledgeElement"];
                        keObjList.push(ke_obj);
                    }
                    keObjList.sort(this.arraySort("order"));
                    this.keList = keObjList;
                    const file_path = eventObj.mapFilePath;
                    if (file_path === null) {
                        return;
                    }
                    const file_name = file_path.split("/").at(-1).split("@").at(-1);
                    var fileObj = new Object()
                    fileObj.name = file_name;
                    fileObj.url = file_path
                    this.uploadFileList = [fileObj]
                    // mapFilePath: "/Users/mml/testDir/map/172/bb711430-0379-4029-a0e4-c1a8d1d6d26b#英国地图.jpg"

                }
            ).catch(
                error => {
                    alert(error)
                }
            );
            
        },
        handleUploadChange(file, uploadFileList) {
            this.fileList = uploadFileList;
        },
        //点击上传
        // submitUpload() {
        //     const formData = new FormData();
        //     console.log(this.uploadFileList);
        //     // formData.append('uploadFile', this.fileList[0].raw);
        // },
        // 删除文件
        async handleRemove(file, uploadFileList) {
            // todo
            // console.log("删除文件", file)
            // console.log(this.eventId);
            const eventId = this.eventId;
            const fileName = file.name;
            const filePath = file.url;
            const {data:res} = await this.$http.post('event/deleteMap', {id:eventId});
            if (res.code !== 200) {
                return this.$message.error("删除地图文件失败");
            }
            this.$message.success("删除地图文件成功");
            this.gettingData();
        },
        // 删除之前
        beforeRemove(file, uploadFileList) {
            console.log(file, uploadFileList);
        },
        // 预览文件
        handlePreview(file) {
            console.log("预览文件", file)
        },
        //文件上传时
        handleProgress(uploadFileList) {
            // console.log(uploadFileList)
        },
        // 上传成功后
        handleSuccess(response, file, fileList) {
            this.$message.success("上传地图文件成功");
            this.gettingData();
        },
        //文件超出个数限制
        handleExceed() {
            this.$message.error("只允许传1个地图文件");
        },
        // 关闭地址新增对话框
        addAddressDialogClosed() {
            this.$refs.addAddressFormRef.resetFields();
        },
         // 关闭知识元新增对话框
        addKEDialogClosed() {
            this.$refs.keFormRef.resetFields();
        },
        editKEDialogClosed() {
            this.$refs.editKEFormRef.resetFields();
        },
        addPeopleDialogClosed() {
            this.$refs.addPeopleFormRef.resetFields();
        },
        // 确定新增地址
        async addAddress() {
            this.$refs.addAddressFormRef.validate(async valid => {
                // valid 是根据rules="addFormRules" 是否校验通过
                if (!valid) return
                // 发起请求
                const eventId = this.eventId;
                const address = this.addAddressForm.address
                var eventObj  = new Object();
                eventObj.id = eventId;
                eventObj.address = address;
                const {data:res} = await this.$http.post("event/insertAddress", eventObj);
                if (res.code !== 200) {
                    return this.$message.error("新增地址失败");
                }
                this.$message.success("新增地址成功");
                // 关闭对话框
                this.addAddressDialogVisible = false;
                this.gettingData();
            })
        },
        // 确定新增人物
        async addPeople() {
            this.$refs.addPeopleFormRef.validate(async valid => {
                // valid 是根据rules="addFormRules" 是否校验通过
                if (!valid) return
                // 发起请求
                const eventId = this.eventId;
                const name = this.addPeopleForm.name
                var eventObj  = new Object();
                eventObj.id = eventId;
                eventObj.people = name;
                const {data:res} = await this.$http.post("event/insertPeople", eventObj);
                if (res.code !== 200) {
                    return this.$message.error("新增人物失败");
                }
                this.$message.success("新增人物成功");
                // 关闭对话框
                this.addPeopleDialogVisible = false;
                this.gettingData();
            })
        },
        // 确认新增知识元
        async addKE() {
            this.$refs.keFormRef.validate(async valid => {
                // valid 是根据rules="addFormRules" 是否校验通过
                if (!valid) return
                // 发起请求
                const eventId = this.eventId;
                const content = this.keForm.content
                var eventObj  = new Object();
                eventObj.id = eventId;
                eventObj.content = content;
                const {data:res} = await this.$http.post("event/insertKE", eventObj);
                if (res.code !== 200) {
                    return this.$message.error("新增知识元失败");
                }
                this.$message.success("新增知识元成功");
                // 关闭对话框
                this.addKEDialogVisible = false;
                this.gettingData();
            })
        },
        async removeAddressById(addressId) {
            const eventId = this.eventId;
            var eventObj = new Object();
            eventObj.id = eventId;
            eventObj.addressId = addressId;
            const {data:res} = await this.$http.post("event/removeAddress", eventObj);
            if (res.code !== 200) {
                return this.$message.error("删除地址失败");
            }
            this.$message.success("删除地址成功");
            // 关闭对话框
            this.addAddressDialogVisible = false;
            this.gettingData();
        },
        async removePeopleById(peopleId) {
            const eventId = this.eventId;
            var eventObj = new Object();
            eventObj.id = eventId;
            eventObj.peopleId = peopleId;
            const {data:res} = await this.$http.post("event/removePeople", eventObj);
            if (res.code !== 200) {
                return this.$message.error("删除人物失败");
            }
            this.$message.success("删除人物成功");
            // 关闭对话框
            this.addPeopleDialogVisible = false;
            this.gettingData();
        },
        async showKeEditDialog(keId) {
            this.editKEDialogVisible = true;
            const {data:res} = await this.$http.get("knowledgeElement/selectOne", {params:{"id":keId}})
            if (res.code !== 200) {
                return this.$message.error("查询知识元失败");
            }
            this.editKEForm = res.data;
        },
        async editKEInfo() {
            const {data:res} = await this.$http.post("knowledgeElement/updateContent", this.editKEForm);
            if (res.code !== 200) {
                return this.$message.error("更新知识元失败");
            }
            this.$message.success("更新知识元成功");
            // 关闭对话框
            this.editKEDialogVisible = false;
            this.gettingData();
        },
        async removeKEById(keId) {
            const eventId = this.eventId;
            var eventObj = new Object();
            eventObj.id = eventId;
            eventObj.keId = keId;
            const {data:res} = await this.$http.post("event/removeKEById", eventObj);
            if (res.code !== 200) {
                return this.$message.error("删除知识元失败");
            }
            this.$message.success("删除知识元成功");
            // 关闭对话框
            this.addKEDialogVisible = false;
            this.gettingData();
        },
        showKeDetial(keId) {
            this.$router.push({
                path:"/keDetail",
                query:{
                    "keId":keId
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .box-card {
        line-height: 0%;
        text-align: left;
        margin-top: 10px;
    }
</style>